<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=nouser-scalable=no" >
    <title>yejq online judge</title>

    <!-- Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{static_url("css/main.css")}}" rel="stylesheet">
    <link href="{{static_url("wysiwyg/jquery.wysiwyg.modal.css")}}" rel="stylesheet">
    <link href="{{static_url("wysiwyg/jquery.wysiwyg.css")}}" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
	<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
  </head>
  <body>

    <!-- start navagation -->
    <nav class="navbar navbar-default navbar-fixed-bottomnavbar-fixed-bottom" role="navigation" id="navigation">
      <div class="container-fluid">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
	  </button>
	  <a class="navbar-brand" href="/">YOJ</a>
	</div>

	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
            <li><a href="/" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Home page">Home</a></li>
            <li><a href="/questions" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="List of Questions">Questions</a></li>
            <li><a href="/contest" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Current Contests">Contest</a></li>
            <li><a href="/rank" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="RankList">Rank</a></li>
            {% if user.authority >= 2 %}
            <li><a href="/design" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Question Design">Design</a></li>
            {% end %}
            {% if user.authority == 3 %}
            <li><a href="/admin" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Administration">Admin</a></li>
            {% end %}
            <li><a href="/logout" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Logout">Logout</a></li>
    </ul>
	  
          <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search Problem" id="search">&nbsp&nbsp<a href="/"><span class="glyphicon glyphicon-search"></a>  <!--这里需要修改-->
            </div>
          </form>
	  <div class="navbar-right nav navbar-nav">
	    <p class="navbar-text">Hello, {{user.nickname}}</p>
	  </div>
	</div><!-- /.container-fluid -->
    </nav>

    <!-- end navigation  -->


    <!-- start main-->
    {% if question.valid == 1 or user.authority == 3 %}
    	<div class="container">
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#question" aria-controls="profile" role="tab" data-toggle="tab">Question</a></li>
            <li role="presentation" ><a href="#discuss" aria-controls="home" role="tab" data-toggle="tab">Discuss</a></li>
        </ul>

  <div class="tab-content">
    <br>
    <div role="tabpanel" class="tab-pane fade in active" id="question">
        <div class="row">
          <div class="col-md-3">
            <div class="panel panel-primary">
            <div class="panel-heading">Statistics</div>
                <ul class="list-group">
                <li class="list-group-item">Difficulty: {{question.difficulty}}</li>
                <li class="list-group-item">Author: {{question.author}}</li>
                <li class="list-group-item">From : {{question.fromwhere}}</li>
                <li class="list-group-item">Prolang : {{question.Prolang}}</li>
                <li class="list-group-item">Time Limit : {{question.timelimit}} MS</li>
                <li class="list-group-item">Memory Limit : {{question.memlimit}} MB</li>
                <li class="list-group-item">Submit : {{question.submit}}</li>
                <li class="list-group-item">Accepted : {{question.accepted}}</li>
              {% if question.submit != 0%}
              <li class="list-group-item">Ritio : {{'%.2f' % (float(question.accepted)/(question.submit) * 100)}}%</li>
              {% else %}
              <li class="list-group-item">Ritio : 0.0%</li>
              {% end %}
                </ul>
          </div>
          </div>

          <div class="col-md-8">
          <div class="panel panel-primary">
          <!-- Default panel contents -->
            <div class="panel-heading">{{question.pid}} : {{question.title}}</div>
              <div class="panel-body">
                <h4>Description:</h4>
                <p>{% raw question.description %}</p>
                <br>
                <h4>Hint:</h4>
                <p>{{question.hint}}</p>
            </div>
                <div class="panel-footer">
                <div id="submit_code">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" >
                  submit
                </button>
                </div>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Submit Your Code</h4>
                      </div>
                      <div class="modal-body">

                        <form class="form-horizontal" role="form">
                          <div class="form-group">
                            <label class="col-sm-2 control-label">Question</label>
                            <div class="col-sm-10">
                              <p class="form-control-static" id="pid">{{question.pid}}</p>
                            </div>
                          </div>

                          <div class="form-group">
                            <label class="col-sm-2 control-label" >User</label>
                            <div class="col-sm-10">
                              <p class="form-control-static" id="username">{{user.username}}</p>
                            </div>
                          </div>

                          <div class="form-group">
                            <label class="col-sm-2 control-label" >Language</label>
                            <div class="col-sm-10">
                              <select class="form-control" name="language" value="language">
                              <option value="c" >c</option>
                              <option value="c++">c++</option>
                              <option value="python2">python2</option>
                              <option value="python3">python3</option>
                              </select>
                            </div>
                          </div>

                          <div class="form-group">
                            <label class="col-sm-2 control-label">Code</label>
                            <div class="col-sm-10">
                              <textarea class="form-control" rows="18" cols="50" name="code"></textarea>
                            </div>
                          </div>

                        </form>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="code_submit">Submit</button>
                      </div>
                    </div>
                  </div>
                </div>
          </div>
        </div>
        </div>
		  </div>
    </div>


    <div role="tabpanel" class="tab-pane fade" id="discuss">
        <div class="row">

        <div class="col-md-12">
          <div class="panel panel-primary">
            <div class="panel-heading">Post One</div>
            <div class="panel-body">
              <form role="form" method="post" action="/discuss?query={{question.pid}}">
                <div class="input-group">
                  <span class="input-group-addon">Title</span>
                  <input type="text" class="form-control" placeholder="Title" name="title" width="400px">
                </div>
                <br>
                <div class="input-group">
                  <span class="input-group-addon">Content</span>
                    <textarea class="form-control" rows="3"  cols="80" name="content" id="wysiwyg"></textarea>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="anonymous">Anonymous
                  </label>
                </div>
                <input type="submit" value="Post">
              </form>
            </div>
          </div>
        </div></div>
        <br>
      <div class="row">
          <div class="panel panel-primary">
            <div class="panel-heading">Details</div>
            {% if len(comments) != 0 %}
            <div class="panel-body">
              {% for comment in comments %}
              <div class="panel panel-default">
                <div class="panel-heading">{{comment.title}}</div>
                <div class="panel-body">
                  {% raw comment.comment %}
                </div>
                <div class="panel-footer" id="place_right">by {{comment.user}} at {{comment.time}}</div>
              </div>
              {% end %}
            </div>
            {% else %}
            <div class="panel-body">
              <div class="alert alert-danger" role="alert">No Comments, you can post the first one.</div>
            </div>
            {% end %}
          </div></div>
      </div>
      </div>
      {% else %}
        <div class="container">
          <div class="alert alert-danger" role="alert">Invalid Query</div>
        </div>
      {% end %}

	<!-- end main-->

    <div class="container">
      <div class="footer">
	     <span> powered by yejq 2015</span>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="{{static_url("js/questionsubmit.js")}}"></script>
    <script src="{{static_url("wysiwyg/jquery.wysiwyg.js")}}"></script>
    <script src="{{static_url("wysiwyg/wysiwyg.colorpicker.js")}}"></script>
    <script src="{{static_url("wysiwyg/wysiwyg.cssWrap.js")}}"></script>
    <script src="{{static_url("wysiwyg/wysiwyg.image.js")}}"></script>
    <script src="{{static_url("wysiwyg/wysiwyg.link.js")}}"></script>
    <script src="{{static_url("wysiwyg/wysiwyg.table.js")}}"></script>
    <script type="text/javascript">
    (function($) {
      $(document).ready(function() {
        $('#wysiwyg').wysiwyg();
      });
    })(jQuery);
    </script>
  </body>
</html>
